<template>
  <div class="timepicker">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-time-select
          v-model="value"
          :picker-options="{start: '08:30',step: '00:15',end: '18:30'}"
          placeholder="请选择时间"><!-- start:开始时间,step:时间间隔,end:结束时间 -->
          <!--  -->
        </el-time-select>
      </el-col>

      <!-- 任意时间 -->
      <el-col :span="8">
        <el-time-picker
          v-model="value2" 
          :picker-options="{ selectableRange: '06:00:00 - 23:30:00' }"
          placeholder="请选择时间">
        </el-time-picker>
      </el-col>

      <!-- 丰富的任意时间范围 -->
      <el-col :span="8">
        <el-time-picker
          v-model="value3"
          is-range
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"><!-- range-separator:选择范围时的分隔符 -->
        </el-time-picker>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  export default {
    name: "TimePicker",
    data() {
      return {
        value: '',
        value2: '',
        value3: ''
      }
    },
  }
</script>

<style scope>

</style>